<template>
	<view class="company_select">
		<view class="logo">
			<img src="/static/images/login/login_logo.png" alt="" srcset="" class="image">
			<text class="text">中新联供应链服务平台</text>
		</view>
		<view class="body">
			<view class="search">
				<input_icon @input="inputKey" prefix="search" placeholder="编号/名称" />
				<text class="action" @tap="getCompanyList">查询</text>
			</view>
			<view class="table">
				<view class="thead">
					<view class="tr">序号</view>
					<view class="tr">编号</view>
					<view class="tr">名称</view>
				</view>
				<view class="tbody" @tap="navigateToHome(item.id)" v-for="(item, index) in companyList" :key="item.id">
					<view class="tr">{{index+1}}</view>
					<view class="tr">{{item.code}}</view>
					<view class="tr">{{item.name}}</view>
				</view>
			</view>
			<LoadingBar :update='updating' :refresh="refresh" :params="{pageSize: 10, codeOrName: this.key}" url="selectdept"
			 :list="companyList" @bind_list="bindList" />
		</view>
	</view>
</template>
<script>
	import input_icon from '@/common/components/input/input-icon/index.vue'
	import LoadingBar from '@/common/components/loader/loadingBar/index.vue'
	export default {
		components: {
			input_icon,
			LoadingBar
		},
		data() {
			return {
				key: '',
				requested: false,
				companyList: [],
				refresh: false,
				updating: false
			}
		},
		onReachBottom() {
			console.log('update')
		},
		mounted() {
			this.refresh = !this.refresh
		},
		onReachBottom() {
			this.updating = !this.updating;
		},
		methods: {
			navigateToHome(id) {
				var args = {}
				if (id !== undefined) {
					args.departId = id
				}
				this.http.POST({
					name: 'login',
					params: args
				}).then(res => {
					if (res.result == 'success') {
						if (res.data.departId === '0') {
							uni.redirectTo({
								url: '/pages/companyEmpty/index'
							})

						} else {


							uni.setStorageSync('roleType', this.$store.state.role)
							uni.setStorageSync('userId', res.data.userId)
							uni.setStorageSync('departId', res.data.departId)
							uni.setStorageSync('departName', res.data.departName)
							this.$store.state.loggedIn = new Promise((resolve, reject) => {
								resolve(res)
							})
							uni.redirectTo({
								url: '/pages/home/index'
							})
						}
					}
				})

			},
			inputKey(e) {
				this.key = e.target.value
			},
			bindList(list) {
				if (!this.requested) {
					if (list.length === 0) {
						this.navigateToHome()
					}
				}
				this.companyList = list
				this.requested = true
			},
			getCompanyList() {
				this.refresh = !this.refresh
			}
		},
	}
</script>
<style>
	.company_select {
		width: 100%;
		background: #ffffff;
		overflow: auto;
		position: relative;
		min-height: 100vh;
	}

	.company_select .logo {
		padding: 100rpx 0rpx;
		padding-bottom: 64upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		position: fixed;
		top: 0upx;
		width: 100%;
		height: 340upx;
		background: #FFFFFF;
		z-index: 2;
	}

	.logo .image {
		width: 386upx;
		height: 80upx;
	}

	.logo .text {
		margin-top: 5upx;
		font-weight: bold;
		font-size: 32upx;
		color: #999999;
	}

	.company_select .body {
		border-top: 1upx solid #DDDDDD;
	}

	.body .search {
		position: fixed;
		top: 340upx;
		width: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 10upx 68upx;
		z-index: 2;
	}

	.body .search input_icon {
		border: 1upx solid #DDDDDD;
	}

	.body .search .action {
		background: var(--theme-color);
		color: white;
		font-size: 32upx;
		width: 174upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.body .search input_icon {
		flex: 1;
	}

	.body .search .wrapper {
		height: 100upx;
		border-bottom: none;
	}

	.body .search input_icon .icon {
		width: 28upx;
		height: 28upx;
	}

	.body .table {
		margin: 29upx 25upx;
		margin-top: 460upx;
		border-top: 1upx solid #DDDDDD;
		border-right: 1upx solid #DDDDDD;
		padding: 1upx;
	}

	.body .table .thead {
		background-color: #F5F5F5;
		color: #333333;
		font-size: 30upx;
	}

	.body .table .tbody {
		color: #666666;
		font-size: 28upx;
	}

	.body .table .tbody:active {
		background-color: #EEEEEE;
	}

	.body .table .thead,
	.body .table .tbody {
		border-bottom: 1upx solid #DDDDDD;
		display: flex;
	}

	.body .table .tr {
		border-left: 1upx solid #DDDDDD;
		padding-left: 17upx;
		height: 70upx;
		line-height: 70upx;
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.body .table .tr:nth-child(2) {
		flex: 1.5;
	}

	.body .table .tr:nth-child(3) {
		flex: 4;
	}
</style>
